```jsx
import * as listbox from "@zag-js/listbox"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId, For } from "solid-js"

const data = [
  { label: "Nigeria", value: "NG" },
  { label: "United States", value: "US" },
  { label: "Canada", value: "CA" },
  { label: "Japan", value: "JP" },
]

function Listbox() {
  const collection = listbox.collection({ items: data })

  const service = useMachine(listbox.machine, {
    id: createUniqueId(),
    collection,
  })

  const api = createMemo(() => listbox.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <label {...api().getLabelProps()}>Select country</label>
      <ul {...api().getContentProps()}>
        <For each={data}>
          {(item) => (
            <li {...api().getItemProps({ item })}>
              <span {...api().getItemTextProps({ item })}>{item.label}</span>
              <span {...api().getItemIndicatorProps({ item })}>✓</span>
            </li>
          )}
        </For>
      </ul>
    </div>
  )
}
```
